/****          加载layui的laypage模块       *******/
var laypage = layui.laypage;

// 获取文章的请求参数
let params = {
  pagenum: 1, // 表示页码值，即获取第 n 页的数据
  pagesize: 2, // 表示每页显示几条数据
}

// ---------------------------- 获取文章列表，渲染 ------------------------
function renderArticle() {
  axios.get(`/my/article/list`, { params }).then((res) => {
    // console.log(res)
    let { status, data, total } = res.data;
    if (status !== 0) return;
    // 渲染数据
    let arr = [];
    data.forEach(item => {
      arr.push(`
        <tr>
          <td>${item.title}</td>
          <td>${item.cate_name}</td>
          <td>${item.pub_date}</td>
          <td>${item.state}</td>
          <td>
            <a href="./edit.html?id=${item.id}" class="layui-btn layui-btn-xs">编辑</a>
            <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger">删除</button>
          </td>
        </tr>
        `);
    });
    $('tbody').html(arr.join(''));
    // res.total 表示数据总数
    showPage(total)
  });
}
renderArticle();



/*********    定义showPage函数   **********/
// 实现分页
function showPage(t) {
  laypage.render({
    elem: 'page', // 不要加 #
    count: t, // 表示总计有多少条数据
    limit: params.pagesize, // 每页显示多少条
    limits: [2, 3, 4, 5],
    curr: params.pagenum, //  起始页（控制页码的背景色，表示是选中状态）
    // prev: '上一个'
    layout: ['limit', 'prev', 'page', 'next', 'count', 'skip'],
    // 点击页码的时候，会触发下面的jump函数。页面刷新之后，也会触发一次
    jump: function (obj, first) {
      // console.log(obj); // 表示前面控制分页的所有属性
      // console.log(first); // 刷新页面之后，是tru，再点击页码，它就是undefined了
      // 点击页码的时候，jump函数会触发，此时，改变data.pagesize和data.pagenum，调用renderArticle即可看对对应页的数据
      if (!first) {
        // console.log(obj.curr);
        params.pagenum = obj.curr;
        params.pagesize = obj.limit;
        renderArticle();
      }
    }
  });
}



// -------------------------- 删除 ------------------------------
$('tbody').on('click', 'button:contains("删除")', function () {
  var id = $(this).data('id');
  layer.confirm('确定删除吗？', function (index) {

    axios.get(`/my/article/delete/${id}`).then(res => {
      let { status, message } = res.data;
      if (status === 0) {
        layer.msg(message);
        renderArticle();
      }
    })

    layer.close(index); // 关闭弹层
  });
})


// -------------------------- 筛选 ------------------------------
var form = layui.form;
// 1. 获取真实的分类，渲染到下拉框的位置
axios.get(`/my/category/list`).then(res => {
  let { status, data } = res.data;
  if (status === 0) {
    let arr = [];
    data.forEach(item => {
      arr.push(`<option value="${item.id}">${item.name}</option>`);
    })
    $('#category').append(arr.join(''));
    // 更新渲染
    // form.render('select', 'lay-filter属性值');
    form.render('select');
  }
})


// 2. 完成筛选
$('#search').on('submit', function (e) {
  e.preventDefault();
  // 获取两个下拉框的值
  var cate_id = $('#category').val();
  var state = $('#state').val();
  // 设置ajax请求的参数
  if (cate_id) {
    params.cate_id = cate_id;
  } else {
    delete params.cate_id; // delete 用于删除对象的属性
  }

  if (state) {
    params.state = state;
  } else {
    delete params.state;
  }

  // 重置页码为 1
  params.pagenum = 1;

  renderArticle(); // 调用renderArticle();渲染页面即可

})